<template>
	<view style="background-color: #fff;">
		<!-- 二维码开始 -->
		<view class="title-bg">
			<view class="status">
				<image src="/static/pay/pay_buy.png" mode=""></image>
				<text class="sta">{{ orderDetailObj.status_text }}
				<text v-show="orderDetailObj.refund_status_text">({{ orderDetailObj.refund_status_text ? orderDetailObj.refund_status_text : '' }})</text>
				</text>
				<text class="price">¥{{ orderDetailObj.price }}</text>
				<!-- <text class="price">{{ orderDetailObj.price | addRMB}}</text> -->
			</view>
			
		</view>
		<view class="qr-code-con" v-if="orderDetailObj.status != 0">
			<view class="qr-code">
				<!-- <image src="/static/pay/qr_code.jpg" mode=""></image> -->
				<image :src="verifyObj.qrcode" mode=""></image>
				<view>{{ verifyObj.address }}</view>
				<!-- <view>{{ codeAddSpace ? codeAddSpace : '' }}</view> -->
			</view>
		</view>
		
		<!-- 表单开始 -->
		<view style="padding: 0 36rpx;background-color: #fff;display: flex;align-items: center;margin: 36rpx 0 0;">
			<view class="form" @click="toActivityDetail">
				<view class="active">
					<image :src="orderDetailObj.banner" mode="" style="width: 200rpx;height: 150rpx;border-radius: 12rpx;"></image>
				</view>
				<view class="active-r">
					<text class="title">{{ orderDetailObj.title }}</text>
					<view class="price-pos">
						
						<text>¥{{ orderDetailObj.price }}</text>
						<!-- <text>{{ orderDetailObj.price | addRMB}}</text> -->
						<text>{{ orderDetailObj.option_title}}</text>
					</view>
				</view>
			</view>
			
			<!-- 细节 -->
			<view v-show="false">
				<view class="list">
					<text>宝宝姓名</text>
					<text>林夕</text>
				</view>
				<view class="list">
					<text>多选择一个</text>
					<text>111</text>
				</view>
				<view class="list">
					<text>多选框</text>
					<text>11</text>
				</view>
				<view class="list" style="display: flex;align-items: center;">
					<text>宝宝照片</text>
					<image src="" mode="" style="width: 40rpx;height: 40rpx;background-color: #fe8700;border-radius: 10rpx;line-height: 40rpx;"></image>
				</view>
				<view class="list">
					<text>宝宝生日</text>
					<text>2018-01-02</text>
				</view>
			</view>
			
		</view>
		<view style="height: 20rpx;background-color: #f1f2f6;"></view>
		
		<!-- 适用门店开始 -->
		<view style="padding: 0 36rpx;background-color: #fff;">
			<view class="apply-shop">
				<view class="title">适用门店</view>
				<text>{{ storeNew.length }}家</text>
				<view class="iconfont icon-xiangxia1" style="color: #acb3bb;margin-left: 5px;font-size: 24rpx;"></view>
			</view>
			<view class="list" style="line-height: 100rpx;border-top: none;border-bottom: 1rpx solid #e6e6e6;" v-for="(item, index) in store" :key="index">
				<text>{{ item.name }}</text>
				<text style="font-size: 24rpx;color: #999999;" @click="lookMap(item)">查看</text>
			</view>
			<!-- <view class="list" style="line-height: 100rpx;border-top: none;border-bottom: 1rpx solid #e6e6e6;">
				<text>金宝贝天天家园中心</text>
				<text style="font-size: 24rpx;color: #999999;">查看</text>
			</view> -->
			<view class="more-shop" @click="lookMore">查看更多</view>
		</view>
		<view style="height: 20rpx;background-color: #f1f2f6;"></view>
		<view class="order">
			<view>
				<text>订单编号</text>
				<text>{{ orderDetailObj.ordersn}}</text>
			</view>
			<view>
				<text>创建时间</text>
				<text>{{ orderDetailObj.create_time }}</text>
			</view>
			<view style="margin-bottom: 100rpx;" v-show="orderDetailObj.paytime">
				<text>支付时间</text>
				<text>{{ orderDetailObj.paytime }}</text>
			</view>
		</view>
		<view class="refund-con">
			<view class="refund-btn" @click="applyRefund" v-if="orderDetailObj.is_support_refund==1 && orderDetailObj.status != 0">申请退款</view>
			<view class="refund-btn" style="background-color: #fe8700;color: #fff;border: none;" @click="payNow" v-if="orderDetailObj.status === 0">立即付款</view>
		</view>
		<view class="mask" v-show="isShowMask"></view>
		<!-- 支付选择窗口 -->
		<view class="pay-select" v-if="isPayShow">
			<view class="way">
				<view>请选择支付方式</view>
				<text class="close" @click="closePay">×</text>
			</view>
			<view class="time">请在{{ remainTimeLess }}分内完成支付  金额 <text>¥{{ moneyObj.price }}</text>元</view>
			<view class="select">
				<view class="wei-xin" v-for="(item, index) in payWay" :key="index" @click="selectPay(index)">
					<image :src="item.url" mode="" class="wei"></image>
					<text class="balance">
						<text>{{ item.val }}</text>
						<text v-show="item.val === '余额'">（¥{{ moneyObj.balance }}）</text>
					</text>
					<image class="is-right" :src="item.sel" mode="" :class="{selected: currentIndex == index}"></image>
				</view>
				<!-- <view class="wei-xin">
					<image src="/static/pay/zhi_fu_bao.jpg" mode="" class="wei"></image>
					<text>支付宝支付</text>
					<image src="/static/pay/pay_selected.jpg" mode="" class="selected"></image>
				</view>
				<view class="wei-xin">
					<image src="/static/pay/balance.jpg" mode="" class="wei"></image>
					<text>余额（¥{{ moneyObj.balance}}）</text>
					<image src="/static/pay/pay_selected.jpg" mode="" class="selected"></image>
				</view> -->
				<button class="button-pay" @click.stop='payMent'>确认支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { queryOrder, cashierOrder, payMoneym, payMoney } from '../../api/index.js'
	export default {
		data() {
			return {
				activeId: '', // 当前活动ID
				isRefund: '', // 是否支持退款(0-否 1-是)
				orderDetailObj: {}, // 订单详情
				verifyObj: {}, // 订单详情
				store: [], // 订单详情门店
				storeNew: [], // 订单详情门店
				isShowMask: false, // 遮罩默认不显示
				isPayShow: false,
				currentIndex: 0, // 默认选中微信支付
				remainTime: '', // 剩下时间
				remainTimeLess: '', // 立即付款里面的剩下时间
				moneyObj: {}, // 点击我要报名出现的余额
				
				payWay: [
					{
						url: '/static/pay/wei_xin.jpg',
						val: '微信支付',
						sel: '/static/pay/pay_selected.jpg'
					},
					// {
					// 	url: '/static/zhi_fu_bao.jpg',
					// 	val: '支付宝支付',
					// 	sel: '/static/pay/pay_selected.jpg'
					// },
					{
						url: '/static/pay/balance.jpg',
						val: '余额',
						sel: '/static/pay/pay_selected.jpg'
					}
				],
			};
		},
		onLoad(option) {
			console.log(option)
			this.activeId = option.id
			// this.isRefund = option.refundid
			let data = {id: this.activeId}
			queryOrder(data, (res) => {
				console.log(res)
				this.orderDetailObj = res.data.order
				// this.verifyObj = res.data.verify
				this.store = res.data.store.slice(0,3)
				this.storeNew = res.data.store
				// if (this.orderDetailObj) {
				// 	console.log(this.orderDetailObj)
				// 	let T = parseInt(this.orderDetailObj.order_close_time * 60)
				// 	//延迟一秒执行自己
				// 	let timer = setInterval(() => {
				// 		//天数
				// 		var days = Math.floor(T / (60 * 60 * 24));
				// 		//取模（余数）
				// 		var modulo = T % (60 * 60 * 24);
				// 		//小时数
				// 		var hours = Math.floor(modulo / (60 * 60));
				// 		modulo = modulo % (60 * 60);
				// 		//分钟
				// 		var minutes = Math.floor(modulo / 60);
				// 		minutes <= 9 ? minutes = '0' + minutes : minutes
				// 		//秒
				// 		var seconds = modulo % 60;
				// 		seconds <= 9 ? seconds = '0' + seconds : seconds
						
				// 		// that.d =  "还剩:" + days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒"
				// 		// console.log("还剩:" +  hours + "小时" + minutes + "分钟" + seconds + "秒")
				// 		// return hours + "小时" + minutes + "分钟" + seconds + "秒"
				// 		this.remainTime = hours + "小时" + minutes + "分钟" + seconds + "秒"
				// 		this.remainTimeLess = minutes + "分钟" + seconds + "秒"
				// 		T--
				// 		if (T <= 0) {
				// 			this.remainTime = "0小时" + "00分钟" + "00秒"
				// 			this.remainTimeLess = "00分钟" + "00秒"
				// 			return
				// 		}
				// 	}, 1000)
				// }
			})
		},
		methods: {
			// 确认支付
			payMent() {
				console.log(this.currentIndex)
				// 判断活动金额是否等于0，真的话直接跳转订单详情页面
				let b = this.moneyObj.price - 0
				if (b <= 0) {
					
					if (this.currentIndex === 0) {
						uni.showLoading({
						    title: '加载中'
						});
						// 微信支付
						let data = {id: this.moneyObj.id,paytype: 3}
						payMoney(data, (res) => {
							console.log(res)
							uni.hideToast();
							uni.navigateTo({
								url: '/pages/active/payOrderDetail?id=' + res.data.id + '&refundid=' + this.orderDetailObj.is_refund
							})
							
							return
						})
					} else {
						// 余额支付
						uni.showLoading({
						    title: '加载中'
						});
						let data = {id: this.moneyObj.id,paytype: 1}
						payMoney(data, (res) => {
							console.log(res)
							uni.hideToast();
							uni.navigateTo({
								url: '/pages/active/payOrderDetail?id=' + res.data.id + '&refundid=' + this.orderDetailObj.is_refund
							})
							return
						})
					}
					
				}
				// this.currentIndex===0 微信支付，1是余额支付
				if (this.currentIndex === 0) {
					// 微信支付
					uni.showLoading({
					    title: '加载中'
					});
					let data = {id: this.moneyObj.id,paytype: 3}
					payMoney(data, (res) => {
						console.log(res)
						uni.hideToast();
						window.location.href = res.data.url
					})
					// uni.showToast({
					//     title: '微信成功支付100万',
					//     duration: 1000
					// });
				} else {
					uni.showLoading({
					    title: '加载中'
					});
					// 余额支付
					let data = {id: this.moneyObj.id,paytype: 1}
					payMoney(data, (res) => {
						console.log(res)
						uni.hideToast();
						uni.navigateTo({
							// url: '/pages/active/payOrderDetail?id=' + this.moneyObj.id + '&refundid=' + this.activityObj.is_refund
							url: '/pages/active/payOrderDetail?id=' + res.data.id + '&refundid=' + this.orderDetailObj.is_refund
						})
					})
				}
			},
			// 关闭支付页面
			closePay() {
				this.isPayShow = false
				this.isShowMask = false
			},
			// 选中支付方式
			selectPay(index) {
				console.log(index)
				this.currentIndex = index
			},
			// 立即付款
			payNow() {
				let data = {id: this.activeId}
				cashierOrder(data, (res) => {
					console.log(res)
					this.moneyObj = res.data
					this.isShowMask = true
					this.isPayShow = true
				})
			},
			// 申请退款
			applyRefund() {
				uni.navigateTo({
					url: '/pages/active/applyRefund?id=' + this.activeId 
				})
			},
			// 查看地图
			lookMap(data) {
				console.log(data)
				window.location.href = `http://laima.laiba.shop/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=store.map&type=1&name=${data.name}&phone=${data.phone}&lng=${data.lng}&lat=${data.lat}&address=${data.address}`
			},
			// 查看更多
			lookMore() {
				if (this.store.length == this.storeNew.length) {
					uni.showToast({
			　　　　　　 title: "没有更多了",
			　　　　　　 icon: 'none'
			　　　　 })
					return
				}
				this.store = this.storeNew
			},
			// 返回活动页面
			toActivityDetail() {
				uni.navigateTo({
					url: '/pages/active/detail?id=' + this.orderDetailObj.aid
				})
			}
		},
		filters: {
			addRMB(val) {
				return '¥' + val
			}
		},
		computed: {
			codeAddSpace() {
				if(this.verifyObj.address) {
					return this.verifyObj.address.substring(0,3) + " " + this.verifyObj.address.substring(3)
				}
			}
		}
	}
</script>

<style lang="scss">
	.mask {
		position:fixed;
		width:100%;
		height:100%;
		background-color:#000;
		opacity:0.7;
		filter:alpha(opacity=70);
		left:0;
		bottom: 0;
		z-index:9990;
	}
	.title-bg {
		padding: 0 36rpx;
		height: 160rpx;
		background-image: linear-gradient(90deg, #ff9c29 0%,#fe7902 100%);
		.status {
			display: flex;
			align-items: center;
			padding-top: 60rpx;
			image {
				width: 32rpx;
				height: 34rpx;
				margin-right: 20rpx;
			}
			.sta {
				font-family: PingFangSC-Semibold;
				font-size: 36rpx;
				color: #ffffff;
				display: flex;
				flex: 1;
			}
			.price {
				font-size: 38rpx;
				line-height: 32rpx;
				color: #ffffff;
			}
		}
		
	}
	.qr-code-con {
		// width: 679rpx;
		height: 461rpx;
		background-color: #ffffff;
		position: relative;
		.qr-code {
			width: 680rpx;
			height: 460rpx;
			background-color: #ffffff;
			box-shadow: 0rpx 0rpx 80.2rpx 0.8rpx 
				rgba(49, 49, 49, 0.07);
			border-radius: 12rpx;
			margin-top: 25rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			position: absolute;
			left: 50%;
			margin-left: -340rpx;
			top: -56rpx;
			
			image {
				width: 180rpx;
				height: 180rpx;
				margin-top: 94rpx;
				margin-bottom: 40rpx;
			}
			view {
				width: 240rpx;
				height: 60rpx;
				background-color: #f1f2f6;
				border-radius: 30rpx;
				text-align: center;
				font-family: PingFangSC-Medium;
				font-size: 28rpx;
				color: #032545;
				line-height: 60rpx;
			}
		}
	}
	
	.form {
		display: flex;
		background-color: #fff;
		margin-bottom: 30rpx;
		.active {
			width: 200rpx;
			height: 150rpx;
			background-color: #ffb302;
			border-radius: 12rpx;
			margin-right: 20rpx;
		}
		.active-r {
			display: flex;
			height: 150rpx;
			flex-direction: column;
			justify-content: space-around;
			.title {
				font-family: PingFangSC-Regular;
				font-size: 28rpx;
				line-height: 40rpx;
				color: #032545;
				display: flex;
				align-items: flex-start;
				// 2行，超出之后...
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
				
			}
			.price-pos {
				display: flex;
				margin-top: 25rpx;
				align-items: center;
				text:first-child {
					color: #fe8700;
					font-size: 32rpx;
					display: flex;
					flex: 1;
				}
				text:last-child {
					font-size: 22rpx;
					color: #666666;
				}
			}
			
		}
	}
	.list {
		font-family: SourceHanSansCN-Regular;
		font-size: 28rpx;
		line-height: 80rpx;
		color: #9a9a9a;
		border-top: 1rpx solid #e6e6e6;
		display: flex;
		text:first-child {
			color: #9a9a9a;
			display: flex;
			flex: 1;
			padding-left: 4rpx;
		}
		text:last-child {
			color: #032545;
			padding-right: 4rpx;
		}
	}
	.apply-shop {
		display: flex;
		align-items: center;
		.title {
			display: flex;
			flex: 1;
			font-size: 28rpx;
			color: #032545;
			font-weight: 500;
			line-height: 80rpx;
		}
		text {
			font-size: 24rpx;
			color: #999999;
		}
	}
	.more-shop {
		width: 160rpx;
		height: 49rpx;
		background-color: #ffffff;
		border-radius: 24.5rpx;
		border: 1rpx solid #b2b2b2;
		// margin-top: 28rpx;
		text-align: center;
		line-height: 49rpx;
		font-size: 22rpx;
		color: #b3b3b3;
		margin: 28rpx auto;
	}
	.more-shop:active {
		opacity: 0.9; 
	}
	.order {
		padding: 8rpx 36rpx 180rpx;
		background-color: #fff;
		view {
			font-size: 24rpx;
			color: #999999;
			line-height: 60rpx;
			text:first-child {
				margin-right: 40rpx;
			}
			text:last-child {
				font-family: PingFangSC-Regular;
			}
		}
	}
	.refund-con {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: fixed;
		right: 0;
		bottom:0;
		.refund-btn {
			width: 160rpx;
			height: 60rpx;
			background-color: #ffffff;
			border-radius: 30rpx;
			border: 1rpx solid #999999;
			
			font-size: 28rpx;
			color: #999999;
			text-align: center;
			line-height: 60rpx;
			margin-right: 36rpx;
		}
		.refund-btn:active {
			opacity: 0.9; 
		}
	}
	.pay-select {
		width: 750rpx;
		// height: 668rpx;
		background-color: #ffffff;
		// background-color: red;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 9992;
		animation: popupSelect 0.2s;
		animation-fill-mode: forwards;
		overflow-x: hidden;
		overflow-y: auto;
		// top: 0;
		.way {
			font-family: SourceHanSansCN-Medium;
			font-size: 36rpx;
			color: #1a1a1a;
			margin-top: 49rpx;
			text-align: center;
			position: relative;
			text {
				font-size: 45rpx;
				position: absolute;
				right: 35rpx;
				top: -5rpx;
			}
		}
		.time {
			font-family: SourceHanSansCN-Regular;
			font-size: 28rpx;
			color: #032545;
			margin-top: 50rpx;
			text-align: center;
			text {
				font-family: PingFangSC-Medium;
				font-size: 28rpx;
				color: #fe8700;
				padding-left: 4rpx;
			}
		}
		.select {
			margin: 25rpx 36rpx 0;
			.wei-xin {
				box-sizing: border-box;
				border-bottom: 1px solid #e6e6e6;
				height: 100rpx;
				display: flex;
				align-items: center;
				.wei {
					width: 46rpx;
					height: 40rpx;
					margin-right: 18rpx;
					margin-left: 13rpx;
				}
				text {
					font-size: 30rpx;
					color: #032545;
					display: flex;
					flex: 1;
				}
				.selected {
					opacity: 1 !important;
				}
				.is-right {
					width: 36rpx;
					height: 36rpx;
					margin-right: 16rpx;
					opacity: 0;
				}
			}
			
			.button-pay {
				width: 678rpx;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 32rpx;
				background-image: linear-gradient(-90deg, 
						#fe8700 0%, 
						#ff9e2c 100%), 
					linear-gradient(-89deg, 
						#e95783 0%, 
						#fe93a3 100%), 
					linear-gradient(
						#cb9e5f, 
						#cb9e5f);
				border-radius: 45rpx;
				position: fixed;
				left: 50%;
				bottom: 21rpx;
				margin-left: -339rpx;
				color: #fff;
				letter-spacing: 2rpx;
			}
			uni-button:after {
			    border: none;
			}
		}
	}
	@keyframes popupSelect
	{
		0%   {height: 0;}
		/*50%  {height:40%;}*/
		100% {height: 668rpx;}
	}
</style>
